<template>
    <el-dialog v-model="isOpen" title="贡献度分析" width="800" :border="true" align-center>
        <div class="eChartContainer flex-row justify-center align-center">
            <div ref="chartRef" class="chart" />
        </div>

        <template #footer>
            <el-button type="primary" @click="isOpen = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

// 接收外部参数
let isOpen  = defineModel()
const props = defineProps([ "result" ])

const chartRef    = ref(null)
let chartInstance = null

// 监听弹窗显示状态
watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

const initChart = () => {
    nextTick(() => {
        if(!chartRef.value){
            return
        }

        // 初始化图表实例
        if(!chartInstance){
            chartInstance = echarts.init(chartRef.value)
        }

        const { details, basePeriodTotal, reportPeriodTotal, totalChange, computeTime } = props.result
        const xAxisData                                                                 = details.map(item => item.factorName)

        // 准备数据
        const basePeriodData        = details.map(item => item.basePeriodValue)
        const reportPeriodData      = details.map(item => item.reportPeriodValue)
        const contributionRatioData = details.map(item => item.contributionRatio)

        // 配置图表选项
        const option = {
            title  : [
                {
                    text     : `基期总数值: ${ basePeriodTotal }`,
                    left     : "10%",
                    textStyle: { fontSize: 14, color: "#606266" },
                },
                {
                    text     : `计算耗时: ${ computeTime }`,
                    left     : "30%",
                    textStyle: { fontSize: 14, color: "#606266" },
                },
                {
                    text     : `报告期总数值: ${ reportPeriodTotal }`,
                    left     : "50%",
                    textStyle: { fontSize: 14, color: "#606266" },
                },
                {
                    text     : `总变化: ${ totalChange }`,
                    left     : "80%",
                    textStyle: { fontSize: 14, color: totalChange >= 0 ? "#67c23a" : "#f56c6c" },
                },
            ],
            tooltip: {
                trigger    : "axis",
                axisPointer: { type: "shadow" },
                formatter  : params => {
                    const item = details[params[0].dataIndex]
                    return `
                      ${ item.factorName }<br>
                      基期值: ${ item.basePeriodValue }<br>
                      报告期值: ${ item.reportPeriodValue }<br>
                      变化量: ${ item.factorChange }<br>
                      贡献值: ${ item.contributionValue.toFixed(2) }<br>
                      贡献率: ${ item.contributionRatio.toFixed(2) }%
                    `
                },
            },
            legend : {
                data: [ "基期值", "报告期值", "贡献率(%)" ],
                top : 40,
            },
            grid   : {
                left        : "3%",
                right       : "5%",
                bottom      : "3%",
                top         : "20%",
                containLabel: true,
            },
            xAxis  : {
                type: "category",
                data: xAxisData,
            },
            yAxis  : [
                {
                    type     : "value",
                    name     : "数值",
                    min      : 0,
                    axisLabel: { formatter: "{value}" },
                },
                {
                    type     : "value",
                    name     : "贡献率(%)",
                    position : "right",
                    axisLabel: { formatter: "{value}%" },
                },
            ],
            series : [
                // 基期值柱状图
                {
                    name     : "基期值",
                    type     : "bar",
                    data     : basePeriodData,
                    itemStyle: { color: "#409eff" },
                    emphasis : { focus: "series" },
                    label    : {
                        show     : true,
                        position : "top",
                        formatter: val => `${ val.value }`,
                    },
                },
                // 报告期值柱状图
                {
                    name     : "报告期值",
                    type     : "bar",
                    data     : reportPeriodData,
                    itemStyle: { color: "#67c23a" },
                    emphasis : { focus: "series" },
                    label    : {
                        show     : true,
                        position : "top",
                        formatter: val => `${ val.value }`,
                    },
                },
                // 贡献率折线图
                {
                    name      : "贡献率(%)",
                    type      : "line",
                    yAxisIndex: 1, // 使用右侧Y轴
                    data      : contributionRatioData,
                    symbol    : "diamond",
                    symbolSize: 8,
                    lineStyle : { width: 2, color: "#f56c6c" },
                    itemStyle : {
                        color: params => params.data >= 0 ? "#e6a23c" : "#f56c6c",
                    },
                    label     : {
                        show     : true,
                        position : "top",
                        formatter: val => `${ val.value.toFixed(2) }%`,
                        color    : val => val.data >= 0 ? "#e6a23c" : "#f56c6c",
                    },
                },
            ],
        }

        chartInstance.setOption(option)

        // 监听窗口大小变化，重绘图表
        window.addEventListener("resize", () => {
            chartInstance.resize()
        })
    })
}

</script>

<style scoped>
.eChartContainer {
    width: 100%;
    height: 500px;

    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>
